<template>
  <div class="icesoft-tag d-flex align-center justify-space-between">
    <div class="d-flex align-center px-3 ">
      <el-dropdown trigger="contextmenu" :tabindex="9999" role="navigation">
        <el-button
          size="small"
          class="transition-fast-in-fast-out"
          :class="{'tag-item home':true,'active':homeMenu.path == defaultActive}"
          @click="onSelect(homeMenu)"
        >
          {{ homeMenu.name }}
        </el-button>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="menuStore.closeByType('other',homeMenu.path)">关闭其他</el-dropdown-item>
            <el-dropdown-item @click="menuStore.closeByType('left',homeMenu.path)">关闭左侧</el-dropdown-item>
            <el-dropdown-item @click="menuStore.closeByType('right',homeMenu.path)">关闭右侧</el-dropdown-item>
            <el-dropdown-item divided @click="menuStore.closeByType('all',homeMenu.path)">关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-dropdown trigger="contextmenu" class="ml-3" v-for="(item,index) in history" :tabindex="index" role="navigation">
        <el-button
          size="small"
          class="transition-fast-in-fast-out"
          :class="{'tag-item':true,'active':item.path == defaultActive}"
          @click="onSelect(item)"
        >
          {{ item.name }}
          <el-icon class="el-icon--right icon transition-fast-in-fast-out" @click="menuStore.close(item.path)">
            <Close />
          </el-icon>
        </el-button>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="menuStore.closeByType('this',item.path)">关闭当前</el-dropdown-item>
            <el-dropdown-item @click="menuStore.closeByType('other',item.path)">关闭其他</el-dropdown-item>
            <el-dropdown-item @click="menuStore.closeByType('left',item.path)">关闭左侧</el-dropdown-item>
            <el-dropdown-item @click="menuStore.closeByType('right',item.path)">关闭右侧</el-dropdown-item>
            <el-dropdown-item divided @click="menuStore.closeByType('all',item.path)">关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <div class="tag-action d-flex align-center justify-center">
      <el-dropdown>
        <div class="el-dropdown-link">
          <el-icon class="el-icon--right" :size="18">
            <MoreFilled />
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="menuStore.closeByType('this')">关闭当前</el-dropdown-item>
            <el-dropdown-item @click="menuStore.closeByType('other')">关闭其他</el-dropdown-item>
            <el-dropdown-item @click="menuStore.closeByType('left')">关闭左侧</el-dropdown-item>
            <el-dropdown-item @click="menuStore.closeByType('right')">关闭右侧</el-dropdown-item>
            <el-dropdown-item divided @click="menuStore.closeByType('all')">关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">

import { useMenuStore } from "~/store/modulers/menu";
import { storeToRefs } from "pinia";
import { Close, MoreFilled } from "@element-plus/icons-vue";
import { Menu } from "~/api/system/menu/types";
import { useRouter } from "vue-router";

const homeMenu: Menu = {
  icon: "", id: "", isShow: false, name: "首页", pid: "", sort: 0,
  path: "/home",

};
const router = useRouter();
const menuStore = useMenuStore();
const { history, defaultActive } = storeToRefs(menuStore);

function onSelect(menu: Menu) {
  if (menu.path != "/home") {
    menuStore.setActive(menu);
  } else {
    menuStore.setDefaultActive("/home");
  }
  router.push(menu.path);
}

</script>

<style scoped lang="scss">
.icesoft-tag {
  height: 36px !important;
  min-height: 36px !important;
  border-bottom: var(--el-border);

  padding-left: 4px;
  .tag-action {
    width: 40px;
    height: 36px;
    border-left: var(--el-border);
  }

  .tag-item {
    padding-right: 0 !important;

    &.home {
      padding-right: 12px !important;
    }

    .el-icon {
      width: 16px;
      height: 16px;
      margin: 0 6px;
      padding: 2px;
      border-radius: var(--el-border-radius-circle);

      svg {
        font-size: 12px !important;
      }

      &:hover {
        background-color: var(--el-color-danger);
        color: var(--el-color-white);
      }
    }

    &.active {
      background-color: var(--el-color-primary);
      color: var(--el-color-white);
      border: none;
    }
  }
}
</style>
